<template>
  <Scroll
    :on-reach-bottom="handleReachBottom">
    <blog-header ref="blogHeader"/>
    <div class="home-list-wrap box-shadow bg-color">
      <List item-layout="vertical" v-if="list.length">
        <ListItem
          v-for="(item, index) in list"
          :key="index"
          class="li-box">
            <ListItemMeta :avatar="item.user.avatar" :title="item.title" />
            <div class="content-wrap" v-html="item.content" @click="goDetail(item)"></div>
            <!-- {{ item.content }} -->
            <template slot="action">
              <li @click="handleCollect(item)">
                <Icon :type="item.isCollect ? 'ios-star' : 'ios-star-outline'" :class="item.isCollect ? 'collect-icon' : ''"/> {{item.collect}}
              </li>
              <li @click="handleLike(item)">
                <Icon :type="item.isLike ? 'ios-thumbs-up' : 'ios-thumbs-up-outline'" :class="item.isLike ? 'collect-icon' : ''"/> {{item.like}}
              </li>
              <li>
                <Icon type="ios-chatbubbles-outline" /> {{item.comment}}
              </li>
            </template>
            <template slot="extra">
              <img :src="item.image" style="width: 300px">
            </template>
        </ListItem>
      </List>
      <div v-else>
        <Empty />
      </div>
    </div>
    <BackTop></BackTop>
  </Scroll>
</template>

<script>
import {
  List,
  Icon,
  Scroll,
  BackTop
} from 'view-design'
import BlogHeader from '@/components/BlogHeader'
import Empty from '@/components/Empty'

export default {
  data() {
    return {
      params: {
        pageIndex: 1,
        pageSize: 15
      }
    }
  },
  components: {
    BlogHeader,
    List,
    ListItem: List.Item,
    ListItemMeta: List.Item.Meta,
    Icon,
    Scroll,
    BackTop,
    Empty
  },
  computed: {
    list() {
      return this.$store.state.home.list || []
    },
    userInfo() {
      return this.$store.state.userInfo || {}
    },
    type() {
      return this.$route.params.type || 'new'
    }
  },
  mounted() {
    this.getBlogs()
  },
  methods: {
    getBlogs() {
      this.$store.commit('updateSpinShow', true)
      this.params.type = this.type
      this.$store.dispatch('home/getBlogs', this.params).then(() => {
        this.$store.commit('updateSpinShow', false)
      })
    },
    handleReachBottom() {
      return new Promise(resolve => {
        setTimeout(() => {
          for (let i = 1; i < 11; i++) {
            this.dataList.push({
              title: `This is title ${i+2}`,
              description: 'This is description, this is description, this is description.',
              avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
              content: 'This is the content, this is the content, this is the content, this is the content.'
            })
          }
          resolve()
        }, 2000)
      })
    },
    goDetail(data) {
      console.log(324234324)
      this.$router.push({
        path: `/detail/${data.id}`,
        query: {
          userId: data.userId
        }
      })
    },
    handleCollect(item) {
      if (!this.userInfo.userName) {
        this.$Message.warning('请先登录')
        this.$refs.blogHeader.handleLogin()
        return
      }
      let api = 'home/addCollect'
      if (item.isCollect) {
        api = 'home/delCollect'
      }
      this.$store.dispatch(api, { contentId: item.id }).then(() => {
        this.getBlogs()
      })
    },
    handleLike(item) {
      if (!this.userInfo.userName) {
        this.$Message.warning('请先登录')
        this.$refs.blogHeader.handleLogin()
        return
      }
      let api = 'home/addLike'
      if (item.isLike) {
        api = 'home/delLike'
      }
      this.$store.dispatch(api, { contentId: item.id }).then(() => {
        this.getBlogs()
      })
    }
  }
}
</script>

<style lang="less">
.ivu-scroll-container {
  height: 100% !important;
  .ivu-scroll-loader:first-child {
    display: none !important;
  }
}
.home-list-wrap {
  width: 1000px;
  margin: 20px auto;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 4px;
  .ivu-icon {
    font-size: 16px;
  }
  .collect-icon {
    color: #2d8cf0;
  }
}
.li-box {
  cursor: pointer;
  code {
    padding: 0.1em 0.5em;
    color: #333;
    background: #f8f8f8;
    border-radius: 2px;
  }
}
.content-wrap {
  width: 600px;
  height: 70px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>